<template>
    <div>
<h2>房型列表</h2>
<div>
<span>房型名称:</span>
<input type="text" v-model="model.HouseName">
<input type="button" value="查询" class="btn  btn-success"  @click="GetList">
</div>

<table class="table">
<tbody>
    <tr class="bg-primary">
        <td>房型名称</td>
        <td>面积</td>
        <td>是否有窗</td>
        <td>价格</td>
        <td>入住人数</td>
        <td>状态</td>
        <td>入住时间</td>
        <td>操作</td>
    </tr>



    <tr  v-for="item  in list " :key="list.Id">
        <td>{{item.HouseName}}</td>
        <td>{{item.HouseMianJi}}</td>
        <td>{{item.InWin?"有" :"无"}}</td>
        <td>{{item.Price}}</td>
        <td>{{item.Num}}</td>
        <td>{{item.State ?"上架" :"下架"}}</td>
        <td>{{item.CreateTime.substring(0,10)}}</td>
        <td>
            <input type="button" value="删除" class="btn  btn-danger"  @click="housedel(item.Id)">
            <input type="button" value="编辑" class="btn  btn-success"  @click="houseupd(item.Id)">
        </td>
    </tr>

</tbody>
</table>

    </div>
</template>

<script setup lang="ts">

import axios from 'axios';

import { ref,reactive, onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';
const route=useRoute();
const router=useRouter();
let list:any=ref([]);

onMounted(()=>{
    GetList();


})



let model=reactive({
    HouseName:'',
})

const GetList=()=>{
    
axios({
    
url:'https://localhost:7229/api/House/HouseList',
method:'get',
params:model,

})
.then((res)=>{

    console.log(res);
   list.value=res.data;
})


.catch((ree)=>{

console.log(ree);
})


}


//编辑
const houseupd=(Id:any)=>{
router.push({
    
path:'/HouseUpd',
query:{
Id:Id,
}
})



}




//删除 
const housedel=(Id:any)=>{

var  f=(confirm('确定要删除吗?'))

if(f){

axios({
url:'https://localhost:7229/api/House/HouseDel',
method:'delete',
params:{
    Id:Id,
},

})
.then((res)=>{

    console.log(res);

    if(res.data>0){
        alert('删除成功');
        GetList();
        return;
    }
    else{

        alert('删除失败');
        return;
    }
})


.catch((ree)=>{

console.log(ree);
})


}


}




</script>

<style scoped>

</style>